// 线路头部
.contention {
    background-color: #F8F8F8;

    .heandTitle {
        position: relative;
        height: 1400rpx;
        width: 750rpx;

        // 背景轮播图
        swiper {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;

            swiper-item {
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        // 背景轮播图渐变蒙版
        .backgroundMask {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
            top: 0;
            background-image: linear-gradient(to bottom,
                    rgba(255, 255, 255, 0) 56%,
                    rgba(255, 255, 255, 1) 80%);
        }

        // 背景图上的文字
        .titleMask {
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 3;

            .Content {
                .TitleContent {
                    margin: 0 40rpx 0 40rpx;
                    color: rgb(255, 255, 255);
                    font-size: 22rpx;

                    view {
                        margin: 16rpx 0;
                    }

                    .title {
                        font-size: 40rpx;
                        font-weight: bold;
                    }

                    .address,
                    .introduce {
                        opacity: 0.8;

                        image {
                            width: 14rpx;
                            height: 20rpx;
                        }
                    }
                }
            }

            // 游玩天数
            .playDay {
                margin: 20rpx 20rpx 0 20rpx;
                padding: 28rpx;
                background-color: rgba(255, 255, 255, 0.35);
                border-radius: 12rpx;
                display: flex;
                justify-content: space-around;
                align-items: center;

                view {
                    text-align: center;

                    text {
                        display: block;

                        &.top {
                            font-size: 32rpx;
                            font-weight: bold;
                            opacity: 0.8;
                        }

                        &.low {
                            margin-top: 14rpx;
                            font-size: 20rpx;
                            opacity: 0.6;
                        }
                    }
                }
            }

            // 我的旅程
            .myTrip {
                margin: 20rpx 20rpx 0 20rpx;
                background-color: rgba(255, 255, 255, 0.35);
                border-radius: 12rpx;

                // 标题
                .myTripTitle {
                    border-bottom: 1rpx dashed rgba(70, 70, 158, 0.2);
                    padding: 26rpx 40rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 24rpx;
                    color: rgba(0, 0, 0, 0.6);

                    .myTripTitleLeft {
                        text {
                            display: inline-block;
                            margin-right: 110rpx;

                            &.top {
                                font-size: 30rpx;
                                color: black;
                            }
                        }
                    }

                    .myTripTitleRight {
                        image {
                            margin-left: 10rpx;
                            width: 10rpx;
                            height: 20rpx;
                        }
                    }
                }

                // 游玩站点
                .myTripAttractions {
                    height: 220rpx;
                    padding: 26rpx 40rpx 20rpx 40rpx;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;

                    .Attractions {
                        margin: 0 86rpx 40rpx 0;
                        text-align: center;
                        display: inline-block;

                        .top {
                            font-size: 24rpx;
                        }

                        .low {
                            margin-top: 14rpx;
                            font-size: 22rpx;
                            opacity: 0.6;
                        }
                    }

                }
            }


        }
    }

    // 驿站补给
    .stationSupply {
        background-color: white;
        margin: 20rpx 0;
        padding: 26rpx 20rpx;

        // 标题
        .SupplyTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);

            .SupplyTitleLeft {
                font-size: 28rpx;
                color: black;
            }

            .SupplyTitleRight {
                image {
                    margin-left: 10rpx;
                    width: 10rpx;
                    height: 20rpx;
                }
            }
        }

        // 内容
        swiper {
            height: 240rpx;

            swiper-item {

                .SupplyContent {
                    margin: 40rpx 0 0;
                    display: flex;
                    justify-content: start;
                    align-items: center;

                    image {
                        width: 160rpx;
                        height: 172rpx;
                        border-radius: 8rpx;
                    }

                    .Content {
                        width: 500rpx;
                        margin: 0 0 0 28rpx;

                        view {
                            margin: 10rpx 0;
                        }

                        .title {
                            font-size: 30rpx;
                        }

                        .clone {
                            font-size: 20rpx;
                            color: #B5B5B5;
                        }

                        .price {
                            .new {
                                color: #DF5153;
                                font-size: 30rpx;
                                font-weight: bold;
                            }

                            .old {
                                font-size: 20rpx;
                                color: #B5B5B5;
                            }
                        }
                    }
                }
            }
        }
    }

    // 沿途风景
    .wayScenery {
        background-color: white;
        margin: 20rpx 0;
        padding: 26rpx 20rpx;

        // 标题
        .sceneryTitle {
            margin: 0 0 32rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);

            .sceneryTitleLeft {
                font-size: 28rpx;
                color: black;
            }

            .sceneryTitleRight {
                image {
                    margin-left: 10rpx;
                    width: 10rpx;
                    height: 20rpx;
                }
            }
        }

        // 内容图片
        .sceneryContent {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .Content {
                margin: 14rpx 0 0 0;
                position: relative;

                image {
                    border-radius: 8rpx;
                    width: 346rpx;
                    height: 224rpx;
                }

                .wenzi {
                    width: 346rpx;
                    line-height: 224rpx;
                    position: absolute;
                    color: white;
                    left: 0;
                    top: 0;
                    text-align: center;
                    font-weight: bold;
                    font-size: 24rpx;
                    text-shadow: 0 6rpx 12rpx #000000;
                }

                &:last-child {
                    image {
                        width: 710rpx;
                        height: 450rpx;
                    }

                    .wenzi {
                        width: 80rpx;
                        line-height: 40rpx;
                        left: 40rpx;
                        top: 28rpx;
                    }
                }

            }
        }
    }

    // 沿途特产
    .wayProduct {
        background-color: white;
        margin: 20rpx 0;
        padding: 26rpx 20rpx;

        // 标题
        .productTitle {
            margin: 0 0 32rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);

            .productTitleLeft {
                font-size: 28rpx;
                color: black;
            }

            .productTitleRight {
                image {
                    margin-left: 10rpx;
                    width: 10rpx;
                    height: 20rpx;
                }
            }
        }

        // 内容
        swiper {
            height: 200rpx;
            swiper-item {
                display: flex;
                justify-content: space-between;
                .productContent {
                    height: 190rpx;
                    width: 140rpx;
                    box-shadow: 2rpx 2rpx 12rpx rgba(114, 124, 142, 0.06);
                    border-radius: 8rpx;
                    .content {
                        image {
                            border-radius: 8rpx 8rpx 0 0;
                            height: 140rpx;
                            width: 140rpx;
                        }
                        .title{
                            color: #575757;
                            font-size: 20rpx;
                            margin: 4rpx 0 0 6rpx;
                        }
                    }
                }
            }
        }
    }

     // 行程安排
     .scheduling {
        background-color: white;
        margin: 20rpx 0;
        padding: 26rpx 20rpx;

        // 标题
        .arrangeTitle {
            margin: 0 0 32rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);

            .arrangetTitleLeft {
                font-size: 28rpx;
                color: black;
            }

            .arrangeTitleRight {
                image {
                    margin-left: 10rpx;
                    width: 10rpx;
                    height: 20rpx;
                }
            }
        }

        // 内容
        .selectDay{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0 12rpx 0;
            color: #797979;
            .day{
                margin: 0 80rpx 0 0;
                &.cur{
                    color: black;
                    font-weight: bold;
                }
            }
        }
        .dayContent{
            margin: 20rpx 0;
        }

    }

}
